<script type="text/x-template" id="add-to-playlist">
    <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()"
         @contextmenu.self="app.resetState()">
        <div class="modal-window">
            <div class="modal-header">
                <div class="modal-title">{{app.getLz('action.addToPlaylist')}}</div>
                <button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
            </div>
            <div class="modal-content">
                <button class="playlist-item"
                        @click="app.addSelectedToNewPlaylist()" style="width:100%;">
                    <div class="icon"><%- include("../svg/plus.svg") %></div>
                    <div class="name">{{app.getLz('action.createPlaylist')}}</div>
                </button>
                <sidebar-playlist :playlist-select="playlistSelect" :relate-media-items="relateItems"
                                  v-for="item in $root.getPlaylistFolderChildren('p.playlistsroot')" v-bind:key="item.id" :item="item">
                </sidebar-playlist>
            </div>
            <div class="modal-search">
                <div class="search-input-container" style="width:100%;margin: 16px 0;">
                    <div class="search-input--icon"></div>
                    <input type="search"
                           ref="searchInput"
                           style="width:100%;"
                           spellcheck="false"
                           :placeholder="app.getLz('term.search') + '...'"
                           v-model="searchQuery"
                           @input="search()"
                           class="search-input">
                </div>
            </div>
        </div>
    </div>
</script>

<script>
  Vue.component('add-to-playlist', {
    template: '#add-to-playlist',
    data: function() {
      return {
        playlistSorted: [],
        searchQuery: "",
        focused: "",
        app: this.$root,
        relateItems: []
      }
    },
    props: {
      playlists: {
        type: Array,
        required: true
      }
    },
    mounted() {
      this.relateItems = [this.$root.selectedMediaItems[0].id]
      this.search()
      this.$refs.searchInput.focus()
      this.$refs.searchInput.addEventListener('keydown', (e) => {
        if (e.keyCode == 13) {
          if (this.focused != "") {
            this.addToPlaylist(this.focused)
          }
        }
      })
    },
    methods: {
      playlistSelect(playlist) {
        if (playlist.type != "library-playlist-folders") {
          this.addToPlaylist(playlist.id)
        }
      },
      addToPlaylist(id) {
        app.addSelectedToPlaylist(id)
      },
      search() {
        this.focused = ""
        if (this.searchQuery == "") {
          this.playlistSorted = this.playlists
        } else {
          this.playlistSorted = this.playlists.filter(playlist => {
            return playlist.attributes.name.toLowerCase().indexOf(this.searchQuery.toLowerCase()) > -1
          })
          if (this.playlistSorted.length == 1) {
            this.focused = this.playlistSorted[0].id
          }
        }
      },
    }
  });
</script>
